<template>
  <div>
    <van-cell-group>
      <van-field type="text" @change="getUrl" label="地址" placeholder="请输入地址" left-icon="home-o" required clearable autofocus>
      </van-field>
      <van-field type="text" @change="getSecret" label="密钥" placeholder="请输入密钥" left-icon="setting-o" clearable>
      </van-field>
      <van-button type="primary" @click="create" size="large">提交</van-button>
    </van-cell-group>
    <van-dialog title="nginx服务配置步骤" showConfirmButton=true showCancelButton=true confirm-button-color="#00CD00" cancel-button-color="#000000" confirmButtonText="docker服务配置步骤" cancelButtonText="跳过" @confirm="knowDocker()" :show="showKnowNginx" use-slot>
      <van-cell-group>
        <van-cell icon="arrow" title="1. 安装nginx服务" value="CentOS7 版本" label="yum install -y nginx"></van-cell>
        <van-cell icon="arrow" title="2. 编辑nginx服务配置" value="CentOS7 版本" label="vim /etc/nginx/nginx.conf"></van-cell>
        <van-cell icon="arrow" title="3. 添加nginx服务配置" value="本机转发" label="proxy_pass http://127.0.0.1:2375;"></van-cell>
        <van-cell icon="arrow" title="4. 启动nginx服务" value="CentOS7 版本" label="systemctl start nginx"></van-cell>
      </van-cell-group>
    </van-dialog>
    <van-dialog title="docker服务配置步骤" showConfirmButton=true showCancelButton=true confirm-button-color="#00CD00" cancel-button-color="#000000" confirmButtonText="nginx服务配置步骤" cancelButtonText="跳过" @confirm="knowNginx()" :show="showKnowDocker" use-slot>
      <van-cell-group>
        <van-cell icon="arrow" title="1. 安装docker服务" value="CentOS7 版本" label="yum install -y docker"></van-cell>
        <van-cell icon="arrow" title="2. 编辑docker服务配置" value="CentOS7 版本" label="vim /etc/sysconfig/docker"></van-cell>
        <van-cell icon="arrow" title="3. 添加docker服务配置" value="本机访问" label="OPTIONS='-H=tcp://127.0.0.1:2375 -H unix:///var/run/docker.sock'"></van-cell>
        <van-cell icon="arrow" title="4. 启动docker服务" value="CentOS7 版本" label="systemctl start docker"></van-cell>
      </van-cell-group>
    </van-dialog>
    <van-toast id="van-toast"></van-toast>
  </div>
</template>

<script>
  import dockerAPI from '@/api/dockerAPI'
  import Toast from '@/../static/vant-weapp/toast/toast'

  export default {
    name: 'create',
    data () {
      return {
        udId: '',
        url: '',
        secret: '',
        showKnowNginx: false,
        showKnowDocker: false
      }
    },
    onShow () {
      var that = this
      that.showKnow()
      that.getUdId()
    },
    methods: {
      getUrl (e) {
        var that = this
        that.url = e.mp.detail
      },
      getSecret (e) {
        var that = this
        that.secret = e.mp.detail
      },
      create () {
        var that = this
        if (that.url.length === 0) {
          Toast.fail({
            message: '地址有误',
            forbidClick: true
          })
          return
        }
        var user = wx.getStorageSync('user')
        var param = {
          udId: that.udId,
          url: that.url,
          secret: that.secret,
          userId: user.userId
        }
        dockerAPI.create(param).then(result => {
          if (result.code === 500) {
            Toast.fail({
              message: result.message,
              forbidClick: true
            })
          } else {
            wx.switchTab({
              url: '/pages/tabbar/docker'
            })
          }
        })
      },
      getUdId () {
        var that = this
        dockerAPI.id().then(result => {
          that.udId = result.message
        })
      },
      showKnow () {
        var that = this
        that.showKnowNginx = true
        // that.showKnowDocker = true
      },
      knowNginx () {
        var that = this
        that.showKnowNginx = true
        that.showKnowDocker = false
      },
      knowDocker () {
        var that = this
        that.showKnowNginx = false
        that.showKnowDocker = true
      }
    }
  }
</script>

<style scoped>
</style>
